/*variables*/
$green: #3c3f41;
$hover: #2d2e30;
$menu-color : #ededed;

$font-kipo: kipo, sans-serif;
$font-light: 'Open Sans', sans-serif;

/*mixins*/
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}
@mixin opacity($value) {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$value)";  /* IE 8 */
  filter: alpha(opacity=$value);                                          /* IE 5-7 */
  -moz-opacity: $value;                                                   /* Netscape */
  -khtml-opacity: $value;                                                 /* Safari 1.x */
  opacity: $value;                                                        /* Good browsers */
}
@mixin min-height($value) {
   min-height: $value; 
   height: auto !important; 
   height: $value;     
}

/*fonts*/
@font-face {
    font-family: kipo;
    src: url('../fonts/kipo.otf');
    font-weight: normal;
    font-style: normal;
}

/*reset*/
* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    color: $menu-color;
    text-decoration: none;
}
h1, h2 {
    font-family: $font-light;
    font-weight: bold;
}
h3, h4, h5, h6 {
    font-family: $font-light;
    font-weight: normal;
}
input {
    outline: 0;
    border-style: none;
}
input:focus {
    outline: 0;
    border-style: none;
}
a:focus {outline:none;}
a::-moz-focus-inner {border:0;}

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}
button {
   outline:none;
}
button::-moz-focus-inner {
   border: 0;
}

/*Base*/
html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    font-family: $font-light
}
.wrapper {
    position: absolute;
    width: 100%;
    @include min-height(100%);
}

/*Layout*/
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1; /*For IE 6/7 only*/
}

.col300_300 {
    display: block;
    float: left;
    width: 28.5%;
    height: 300px;
    margin: 2.3%;
    background-size: cover;
}
.col300_650 {
    display: block;
    float: left;
    width: 28.5%;
    height: 650px;
    margin: 2.3%;
    background-size: cover;
}
.col650_300 {
    display: block;
    float: left;
    width: 61.9%;
    height: 300px;
    margin: 2.3%;
    background-size: cover;
}
#grid {
    position: relative;
    width: 1050px;
//    min-height: 1000px;
}
.shuffle-sizer {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    width: 33.3%;
}

/*Modules*/
/*HEADER*/
#header {
    position: fixed;
    width: 100%;
    height: 100px;
    padding: 0 20px;
    background-color: #fff;
    z-index: 10;
    cursor: pointer;
    @include opacity(0);
    #search-icon {
        display: block;
        float:left;
        width: 33.3%;
        line-height: 105px;
        text-align: left;
        font-family: $font-kipo;
        font-size: 50px;
        color: $green;
        z-index: 9;
        &:after {
            content: "\f002";
            cursor: pointer;
        }
    }
    #logo {
        display: block;
        float:left;
        width: 33.3%;
        line-height: 100px;
        text-align: center;
        font-family: $font-kipo;
        font-size: 75px;
        color: $green;
        z-index: 9;
        &:after {
            content: "\f116";
        }
    }
    #menu-icon {
        display: block;
        float:left;
        width: 33.3%;
        line-height: 105px;
        font-family: $font-kipo;
        font-size: 37px;
        text-align: right;
        color: $green;
        z-index: 9;
        &:after {
            content: "\f00a";
            cursor: pointer;          
        }
    }
}
/*LOAD MODULE*/
 #load-logo {
        display: block;
        float:left;
        width: 100%;
        line-height: 110px;
        text-align: center;
        font-family: $font-kipo;
        font-size: 100px;
        color: $menu-color;
        z-index: 9;
        &:after {
            content: "\f116";
        }
    }
/*TOP NAV*/
nav#top-nav-menu {
    position: fixed;
    top: 0;
    right: -310px;
    width: 250px;
    height: 100%;
    background-color: $green;
    text-transform: uppercase;
    z-index: 999;
            ul {
                padding: 0;
                margin: 0;
                li {
                    
                    a {
                        display: block;
                        width: 100%;
                        height: 60px;
                        text-align: center;
                        line-height: 60px;
                        color: $menu-color;
                        border-top: 1px solid $green;
                        border-bottom: 1px solid $green;
                        
                        &:hover {
                            color: #fff;
                            background-color: $hover;
                            border-top: 1px solid #27282a;
                            border-bottom: 1px solid #454648;  
                        }
                    }
                    a.active {
                        color: #fff;
                        background-color: $hover;
                        border-top: 1px solid #27282a;
                        border-bottom: 1px solid #454648;
                    }
                    
                }
            }
        }
#lang {
    width: 100%;
    height: 60px;
    color: $menu-color;
    text-transform: uppercase;
    text-align: center;
    line-height: 60px;
    
    div {
        float: left;
        width: 33.3%;
        border-top: 1px solid $green;
        border-bottom: 1px solid $green;
        
        &:hover {
            cursor: pointer;  
            color: #fff;
            background-color: $hover;
            border-top: 1px solid #27282a;
            border-bottom: 1px solid #454648;
        }
    }
    .active {
        color: #fff;
        background-color: $hover;
        border-top: 1px solid #27282a;
        border-bottom: 1px solid #454648;
    }
}
#close-button {
    position: absolute;
    top: 0;
    left: -60px;
    height: 62px;
    width: 60px;
    text-transform: uppercase;
    text-align: center;
    line-height: 62px;
    color: $menu-color;
    background-color: $hover;
    border-top: 1px solid #27282a;
    border-bottom: 1px solid #27282a;
    
    &:hover {
        color: #927;
        //background-color: $green;
        border-top: 1px solid #27282a;
        border-bottom: 1px solid #454648;
        cursor: pointer;
    }
}
#search-field { 
    position: relative;
    width: 100%;
    heigth: 0px;
    margin: auto;
    padding: 20px 0px;
    text-align: center;
    z-index: 11;
    #search {
        display:    block;
        width: 85%;
        margin: auto;
        padding: 0 0px 0 10px;
        height: 40px;
        font-size: 20px;
        color: #aaa;
        @include border-radius(30px);
    }
    #search-button {
        position: relative;
        top: -35px;
        left: 80px;
        width: 30px;
        height: 30px;
        padding: 0px;
        font-family: $font-kipo;
        border-style: none;
        font-size: 35px;
        background-color: #fff;
        text-align: center;
        line-height: 35px;
        &:after {
            color: #aaa;
            content: "\f002";
            cursor: pointer;
        }
    }
}
#copyright {
    position: absolute;
    bottom: 10px;
    left: 55px;
    margin: 30px 0 0 0;
    margin: 0 0 20px 0;
    height: 12px;
    p {
        display: block;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
    }
}
/*CONTENT*/
#content-home {
    display: block;
    width: 100%;
    margin-top: 1500px;
    padding-top: 100px;
    background-color: rgba(255, 255, 255, 1);
    @include opacity(0);

    
    article {
        display: block;
        width: 1050px;
        min-height: 1000px;
        top: 100px;
        margin: auto;
        padding: 0 0 100px 0;
        
        h1 {
            display: block;
            text-align: center;
            font-size: 40px;
            line-height: 80px;
            text-transform: uppercase;
            color: #444;
        }
    }
}
#filter {
    width: 75%;
    min-width: 350px;
    height: 40px;
    margin: auto;
    text-align: center;
    
    li {
        float: left;
        width: auto;
        
        a{
            display: block;
            width: 100%;
            height: 40px;
            padding: 0px 20px;
            line-height: 40px;
            font-size: 20px;
            color: $green;
            
            &:hover {
                color: #999;
            }
            &.active {
                color: #999;
            }
        }
    }
}
#scroll-icon {
    position: absolute;
    display: block;
    width: 100%;
    line-height: 100px;
    font-family: $font-kipo;
    font-size: 37px;
    text-align: center;
    color: $menu-color;
    z-index: 12;
    &:after {
        content: "\f078";
        cursor: pointer;          
    }
}

/*PROJECT MODULE*/
.wrapper-project {
    #header {
        @include opacity(1);
    }
    #back-button {
        display: block;
        float:left;
        width: 33.3%;
        line-height: 105px;
        text-align: left;
        font-family: $font-kipo;
        font-size: 32px;
        color: $green;
        z-index: 9;
        &:after {
            content: "\f060";
            cursor: pointer;
        }
    }
}
#grid-project {
    width: 100%;
}
article#project {
    width: 1050px;
    margin: auto;
    padding-top: 100px;
    
    h1 {
         display: block;
         text-align: center;
         font-size: 40px;
         line-height: 80px;
         text-transform: uppercase;
         color: #444;
    }
    #grid {
        width: 1050px;
        margin: auto;
    }
    #description {
        float: left;
        margin: 50px 0 0 0;
        padding: 0px 25px 50px 25px;
    }
}
/*MODULE ALL PROJECTS*/
.wrapper-all-projects {

    #header {
        @include opacity(1);
    }
    #content-projects {
        width: 100%;
    }
    #projects {
        display: block;
        position: relative;
        width: 1050px;
        min-height: 1000px;
        top: 100px;
        margin: auto;
        padding: 0 0 100px 0;

        h1 {
            display: block;
            text-align: center;
            font-size: 40px;
            line-height: 80px;
            text-transform: uppercase;
            color: #444;
        }
        #grid {
            width: 1050px;
            margin: auto;
        }
    }
}

.img-responsive {
  display: block;
  width: 100% \9;
  max-width: 100%;
  max-height: 100%;
  
}

/*MODULE SLIDE SHOW*/
#slide-show {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
    ul {
        li {          
            &:nth-child(1) span {
                background-image: url('../images/slide-1.jpg');
            }
            &:nth-child(2) span {
                background-image: url('../images/slide-3.jpg');
                animation-delay: 6s;
                -webkit-animation-delay: 6s;
                -moz-animation-delay: 6s;
                -o-animation-delay: 6s;
                -ms-animation-delay: 6s;
                animation-delay: 6s;
            }
            &:nth-child(3) span {
                background-image: url('../images/slide-2.jpg');
                -webkit-animation-delay: 12s;
                -moz-animation-delay: 12s;
                -o-animation-delay: 12s;
                -ms-animation-delay: 12s;
                animation-delay: 12s;
            }      
            span {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                color: transparent;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                background-position: center center;
                -webkit-backface-visibility: hidden;
                -webkit-animation: imageAnimation 18s linear infinite 0s;
                -moz-animation: imageAnimation 18s linear infinite 0s;
                -o-animation: imageAnimation 18s linear infinite 0s;
                -ms-animation: imageAnimation 18s linear infinite 0s;
                animation: 18s imageAnimation linear infinite 0s;
                @include opacity(0);
                z-index: 0;
            }
        }
    }
}
@-webkit-keyframes imageAnimation { 
	0% {
	    @include opacity(0);
	    -webkit-animation-timing-function: ease-in;
	}
	15% {
	    @include opacity(.8);
	    -webkit-animation-timing-function: ease-out;
	}
	35% {
	    @include opacity(.8);
	}
	55% {
	    @include opacity(0);
	}
	100% { @include opacity(0); }
}
@-moz-keyframes imageAnimation { 
	0% {
	    @include opacity(0);
	    -moz-animation-timing-function: ease-in;
	}
	15% {
	    @include opacity(.8);
	    -moz-animation-timing-function: ease-out;
	}
	35% {
	    @include opacity(.8);
	}
	55% {
	    @include opacity(0);
	}
	100% { @include opacity(0); }
}
@-o-keyframes imageAnimation { 
	0% {
	    @include opacity(0);
	    -o-animation-timing-function: ease-in;
	}
	15% {
	    @include opacity(.8);
	    -o-animation-timing-function: ease-out;
	}
	35% {
	    @include opacity(.8);
	}
	55% {
	    @include opacity(0);
	}
	100% { @include opacity(0); }
}
@-ms-keyframes imageAnimation { 
	0% {
	    @include opacity(0);
	    -ms-animation-timing-function: ease-in;
	}
	15% {
	    @include opacity(.8);
	    -ms-animation-timing-function: ease-out;
	}
	35% {
	    @include opacity(.8);
	}
	55% {
	    @include opacity(0);
	}
	100% { @include opacity(0); }
}
@keyframes imageAnimation { 
	0% {
	    @include opacity(0);
	    animation-timing-function: ease-in;
	}
	15% {
	    @include opacity(.8);
	    animation-timing-function: ease-out;
	}
	35% {
	    @include opacity(.8);
	}
	55% {
	    @include opacity(0);
	}
	100% { @include opacity(0); }
}

/*MEDIA QUERIES*/
@media only screen and (max-width: 1050px) {
/* Styles */
    .projects {
        width: 100% !important;
    }
    #content-home, #content-projects  {
        width: 100% !important;
    }
    #project, #projects{
        width: 100% !important;
    }
    #grid {
        width: 100% !important;
    }

}
@media only screen and (max-width: 974px) {
/* Styles */
    #filter {
        width: 100%;
        max-width: 220px;
        height: 200px;
        margin: auto;
        text-align: center;
        
        li {
            clear: both;
            display: block !important;
            width: 100%
        }
    }

}
@media only screen and (max-width: 600px) {
/* Styles */    
    .col300_300 {
        display: block;
        float: left;
        width: 40%;
        height: 300px;
        margin: 2.3%;
    }
    .col300_650 {
        display: block;
        float: left;
        width: 95.4%;
        height: 650px;
        margin: 2.3%;
    }
    .col650_300 {
        display: block;
        float: left;
        width: 95.4%;
        height: 300px;
        margin: 2.3%;
    }
    .shuffle-sizer {
        position: absolute;
        visibility: hidden;
        opacity: 0;
    }
}

